<template>
  <el-container class="home-container">
    <el-header class="el-header">
      <TopBar />
    </el-header>
    <el-container class="el-container">
      <el-aside width="200px">
        <LeftBar />
      </el-aside>
      <el-main>
        <p>请选择您要查看的点序列图像类别:</p>
        <el-select v-model="selectedCategory" placeholder="请选择" style="width: 200px">
          <el-option
            v-for="category in categories"
            :key="category"
            :label="category"
            :value="category"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="fetchImages">查看</el-button>

        <div v-if="images.length > 0">
          <h3>图像展示:</h3>
          <div class="image-container">
            <div v-for="image in images" :key="image.id" class="image-item">
              <img :src="image.url" alt="图像">
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import TopBar from '@/components/TopBar'
import LeftBar from '@/components/LeftBar'

export default {
  name: 'ShowListImage',
  components: { TopBar, LeftBar },
  data () {
    return {
      selectedCategory: '',
      categories: ['ambulance', 'apple', 'bear', 'bicycle', 'bird', 'bus', 'cat', 'foot', 'owl', 'pig'],
      images: []
    }
  },
  methods: {
    fetchImages () {
      // 调用后端接口获取图像数据，这里假设接口为 getImagesByCategory(category)，返回一个包含图像信息的数组

      // const category = this.selectedCategory
      // 调用后端接口获取图像数据
      // 假设接口返回的数据结构为 [{ id: 1, url: '图像URL' }, { id: 2, url: '图像URL' }, ...]
      // this.images = getImagesByCategory(category)
    }
  }
}
</script>

<style scoped>

.home-container {
  height: 100%;
  width: 100%;
}

.el-header{
  padding-left: 0;
  margin-left: 0;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.image-item {
  margin: 10px;
}

</style>
